﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>图片提示</title>
	<!--   引入jQuery -->
	<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	<style type="text/css">
		body {
			margin: 0;
			padding: 40px;
			background: #fff;
			font: 80% Arial, Helvetica, sans-serif;
			color: #555;
			line-height: 180%;
		}

		img {
			border: none;
		}

		ul,
		li {
			margin: 0;
			padding: 0;
		}

		li {
			list-style: none;
			float: left;
			display: inline;
			margin-right: 30px;
			border: 1px solid #AAAAAA;
		}

		/* tooltip */
		#tooltip {
			position: absolute;
			border: 1px solid #ccc;
			background: #333;
			padding: 2px;
			display: none;
			color: #fff;
		}
	</style>
	<script type="text/javascript">
		//<![CDATA[
		$(function () {
			var x = 10;
			var y = 20;
			$("a.tooltip").mouseover(function (e) {
				var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/><br/>" + this.title + "</div>"; //创建 div 元素
				$("body").append(tooltip);	//把它追加到文档中						 
				$("#tooltip")
					.css({
						"top": (e.pageY + y) + "px",
						"left": (e.pageX + x) + "px"
					}).show("fast");	  //设置x坐标和y坐标，并且显示
			}).mouseout(function () {
				$("#tooltip").remove();	 //移除 
			}).mousemove(function (e) {
				$("#tooltip")
					.css({
						"top": (e.pageY + y) + "px",
						"left": (e.pageX + x) + "px"
					});
			});
		})
//]]>
	</script>

</head>

<body>
	<h3>有效果：</h3>
	<ul>
		<li><a href="images/iphone5s-big.jpg" class="tooltip" title="iphone5s"><img src="images/iphone5s-small.jpg"
					alt="苹果 iPod" /></a></li>
		<li><a href="images/samsung-big.jpg" class="tooltip" title="三星Note"><img src="images/samsung-small.jpg"
					alt="苹果 iPod nano" /></a></li>
		<li><a href="images/xiaomiM4-big.jpg" class="tooltip" title="小米M4"><img src="images/xiaomiM4-small.jpg"
					alt="苹果 iPhone" /></a></li>
	</ul>


	<br /><br /><br /><br />
	<br /><br /><br /><br />


	<h3>&nbsp;</h3>
	<h3>无效果：</h3>
	<ul>
		<li><a href="images/iphone5s-big.jpg" title="iphone5s"><img src="images/iphone5s-small.jpg" alt="苹果 iPod" /></a>
		</li>
		<li><a href="images/samsung-big.jpg" title="三星Note"><img src="images/samsung-small.jpg"
					alt="苹果 iPod nano" /></a></li>
		<li><a href="images/xiaomiM4-big.jpg" title="小米M4"><img src="images/xiaomiM4-small.jpg" alt="苹果 iPhone" /></a>
		</li>

	</ul>
</body>

</html>